<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="500" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Helper function to draw a vertical resistor (zigzag)
    function drawVerticalResistor(x, y_start, y_end, amplitude, zigs) {
        const length = y_end - y_start;
        const dy = length / zigs;
        ctx.beginPath();
        ctx.moveTo(x, y_start);
        for (let i = 0; i < zigs; i++) {
            const current_x = x + ((i % 2 === 0) ? amplitude : -amplitude);
            const current_y = y_start + (i + 0.5) * dy;
            ctx.lineTo(current_x, current_y);
        }
        ctx.lineTo(x, y_end);
        ctx.stroke();
    }

    // Coordinates
    const x_batt = 80;
    const x_left_branch = 200;
    const x_right_branch = 400;
    const y_top = 50;
    const y_bottom = 300;
    const y_mid = 175;

    // --- Draw Wires ---
    ctx.beginPath();
    // Top horizontal wire
    ctx.moveTo(x_batt, y_top);
    ctx.lineTo(x_right_branch, y_top);
    // Bottom horizontal wire
    ctx.moveTo(x_batt, y_bottom);
    ctx.lineTo(x_right_branch, y_bottom);
    // Battery connecting wires
    const y_batt_pos = 155;
    const y_batt_neg = 195;
    ctx.moveTo(x_batt, y_top);
    ctx.lineTo(x_batt, y_batt_pos);
    ctx.moveTo(x_batt, y_batt_neg);
    ctx.lineTo(x_batt, y_bottom);
    ctx.stroke();

    // --- Draw Components ---

    // Battery
    ctx.beginPath();
    ctx.moveTo(x_batt - 30, y_batt_pos); // Positive plate (long)
    ctx.lineTo(x_batt + 30, y_batt_pos);
    ctx.moveTo(x_batt - 15, y_batt_neg); // Negative plate (short)
    ctx.lineTo(x_batt + 15, y_batt_neg);
    ctx.stroke();

    // Resistors
    const res_amplitude = 12;
    const res_zigs = 7;
    // R1
    drawVerticalResistor(x_left_branch, y_top, y_mid, res_amplitude, res_zigs);
    // R2
    drawVerticalResistor(x_left_branch, y_mid, y_bottom, res_amplitude, res_zigs);
    // R3
    drawVerticalResistor(x_right_branch, y_top, y_mid, res_amplitude, res_zigs);
    // R4
    drawVerticalResistor(x_right_branch, y_mid, y_bottom, res_amplitude, res_zigs);

    // Capacitor and its wire
    const cap_x_center = (x_left_branch + x_right_branch) / 2;
    const cap_gap = 12;
    const cap_plate_h = 40;
    ctx.beginPath();
    ctx.moveTo(x_left_branch, y_mid);
    ctx.lineTo(cap_x_center - cap_gap / 2, y_mid);
    ctx.moveTo(cap_x_center + cap_gap / 2, y_mid);
    ctx.lineTo(x_right_branch, y_mid);
    ctx.stroke();
    // Capacitor plates
    ctx.beginPath();
    ctx.moveTo(cap_x_center - cap_gap / 2, y_mid - cap_plate_h / 2);
    ctx.lineTo(cap_x_center - cap_gap / 2, y_mid + cap_plate_h / 2);
    ctx.moveTo(cap_x_center + cap_gap / 2, y_mid - cap_plate_h / 2);
    ctx.lineTo(cap_x_center + cap_gap / 2, y_mid + cap_plate_h / 2);
    ctx.stroke();

    // --- Draw Labels ---
    
    // Battery label ξ
    ctx.font = "bold 30px serif";
    ctx.fillText("ξ", x_batt - 60, y_mid + 10);
    
    // Capacitor label C
    ctx.font = "bold 30px serif";
    ctx.fillText("C", cap_x_center - 10, y_mid - 30);

    // Resistor labels
    const label_base_font = "bold 30px serif";
    const sub_font = "bold 22px serif";
    
    // R1
    ctx.font = label_base_font;
    ctx.fillText("R", x_left_branch - 60, y_top + 70);
    ctx.font = sub_font;
    ctx.fillText("1", x_left_branch - 42, y_top + 80);
    
    // R2
    ctx.font = label_base_font;
    ctx.fillText("R", x_left_branch - 60, y_bottom - 60);
    ctx.font = sub_font;
    ctx.fillText("2", x_left_branch - 42, y_bottom - 50);
    
    // R3
    ctx.font = label_base_font;
    ctx.fillText("R", x_right_branch + 30, y_top + 70);
    ctx.font = sub_font;
    ctx.fillText("3", x_right_branch + 48, y_top + 80);

    // R4
    ctx.font = label_base_font;
    ctx.fillText("R", x_right_branch + 30, y_bottom - 60);
    ctx.font = sub_font;
    ctx.fillText("4", x_right_branch + 48, y_bottom - 50);
</script>
</body>
</html>